<template>
  <view class="fuel_remit_wraper">
    <!-- 头部 -->
    <view class="fuel_remit_nav">
      <view class="title_wraper">
        <view class="title_top">
          <view class="title_name">{{ stationName }}</view>
          <view class="fuel_icon"><img src="../../static/fuel/jinri.png" alt="" /></view>
        </view>
        <!-- <view class="title_right" @click="openLocation()">
          <view class="icon nav"></view>
          <view class="text">{{distances}}</view>
        </view> -->
        <view class="title_bottom">
          <view class="title_region">{{ stationData.detailRegionData || "" }}</view>
        </view>
      </view>
      <view class="main_wraper">
        <view class="main_title"><text class="text">￥</text>{{ selectStaOilGunList.oilStationPrice }}</view>
        <view class="station_price">油站价</view>
      </view>
      <view class="notice_icon_model">
        <view class="notice_icon"><img src="../../static/fuel/notice_icon.png" alt="" /></view>
        <view>付款前请您确认油枪</view>
      </view>
    </view>
    <!-- 油枪 -->
    <view class="remit_container">
      <view class="oils" @click="toggle('bottom')">
        <view class="select_oils">选择油枪</view>
        <view class="oil_right">
          <view class="oil_number">{{ fuel_name || "请选择油枪" }}</view>
          <view class="select_icon"><img src="../../static/fuel/select_icon.png" alt="" /></view>
        </view>
      </view>
      <view class="oils_price">
        <view class="input_price">输入金额</view>
        <view class="field_price" @click="openKeyboard">
          <input :placeholder="priceValue ? '' : '￥ 输入金额，实时计算优惠'" confirm-type="done" type="digit" step="0.01" :placeholder-style="`color: ${priceValue ? '#f56812' : '#666'};padding-left:20rpx;font-size:34rpx;`" min="0" v-model="priceValue" :disabled="true" />
        </view>
        <view class="btn_model">
          <view v-for="(item, index) in priceList" :key="index" @click="priceChange(item)">{{ item }}</view>
        </view>
      </view>
    </view>
    <!-- 数字键盘 -->
    <cu-keyboard confirmText="去支付" ref="numKeyboard" @change="keyboardChange" @confirm="keyboardConfirm" :keyboardAccount="priceValue" @hide="keyboardHide" :isMask="true" confirmStyle="background-color: #fc6703"> </cu-keyboard>
    <view class="pupop">
      <uni-popup ref="popup" background-color="#fff">
        <view class="fuel_qiang">
          <view class="youqiang">请选择油枪</view>
          <view class="main_card_container">
            <view :class="count == index ? 'active' : 'main_card'" v-for="(item, index) in staOilGunList" :key="index" @click.stop="changeCard(item, index)">
              <view class="gunName">{{ item.gunName }}</view>
              <view class="oilName">{{ item.oil.oilName + item.oil.oilClass }}</view>
            </view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  head() {
    return {
      title: "一键加油",
    };
  },
  data() {
    return {
      stationData: {},
      showKeyboard: false, // 键盘显示
      staOilGunList: [],
      oilGunNum: "", // 油枪号
      oilGunName: "", // 油枪名字结合
      oilName: "", // 油枪名字
      oilClass: "", // 油枪类型
      oilId: "", // 油ID
      priceValue: "", // 价格
      oilOfficialPrice: "", // 单价
      priceList: [200, 300, 400, 500],
      stationId: "",
      stationName: "",
      distances: "",
      type: "center",
      fuel_name: "",
      count: null,
    };
  },

  onLoad(e) {
    console.log("油企信息", e);
    this.stationId = e.stationId;
    this.stationName = e.stationName;
    this.distances = e.distances;
    this.init();
  },

  watch: {
    showKeyboard(val) {
      if (val) {
        this.$refs.numKeyboard.open();
      } else {
        this.$refs.numKeyboard.close();
      }
    },
  },

  computed: {
    // 展示的油站信息
    selectStaOilGunList() {
      const { staOilGunList = [] } = this;
      return staOilGunList.find((val) => val.oilId === this.oilId) || staOilGunList[0];
    },
  },
  created() {},
  methods: {
    async init() {
      this.stationData = JSON.parse(uni.getStorageSync("stationData")) || {};
      console.log(this.stationData, "stationData");
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      try {
        const res = await this.$Request({
          url: "/selectStaOilGunList",
          method: "GET",
          data: { stationId: this.stationId },
        });
        if (res.retCode !== 0) {
          throw new Error("获取油站失败");
        }
        this.staOilGunList = res.data.staOilGunList || [];
        this.oilGunNum = res.data.staOilGunList[0].gunName;
        this.oilGunName = res.data.staOilGunList[0].oil.oilName + res.data.staOilGunList[0].oil.oilClass;
        this.oilName = res.data.staOilGunList[0].oil.oilName;
        this.oilClass = res.data.staOilGunList[0].oil.oilClass;
        this.oilId = res.data.staOilGunList[0].oilId;
        this.fuel_name = this.oilGunNum + "号枪" + this.oilGunName;
      } catch (error) {
        uni.showToast({
          title: error,
          icon: "error",
        });
      }
      uni.hideLoading();
    },
    toggle(type) {
      this.type = type;
      this.$refs.popup.open(type);
    },
    openLocation() {
      const { stationData } = this;
      let longitude = Number(stationData.stationLongitude).toFixed(0);
      let latitude = Number(stationData.stationLatitude).toFixed(0);
      if (Number(latitude) > 90 || Number(latitude) < -90) {
        latitude = "0";
      }
      if (Number(longitude) > 180 || Number(longitude) < -180) {
        longitude = "0";
      }
      uni.openLocation({
        longitude: Number(longitude),
        latitude: Number(latitude),
        name: stationData.stationName,
        success: function () {
          console.log("success");
        },
        fail: function (e) {
          console.log(e, "fail");
        },
      });
    },

    openKeyboard() {
      if (!this.oilGunNum || !this.oilGunName) {
        uni.showToast({
          title: "请先选择油枪号",
          icon: "error",
        });
        return;
      }
      this.showKeyboard = true;
    },

    // 删除金额
    keyboardHide() {
      this.showKeyboard = false;
    },

    keyboardChange(e) {
      this.priceValue = e;
    },

    keyboardConfirm(e) {
      if (e < 5 || e > 50000) {
        uni.showToast({
          title: "请输入5-50000的值",
          icon: "error",
        });
      } else {
        this.priceHandleChange();
      }
    },

    // 选择油枪
    changeCard(item, index) {
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.fuel_name = this.oilGunNum + "号枪" + this.oilGunName;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.count = index;
      this.$refs.popup.close();
      // this.showKeyboard = true;
    },

    // 点击价格列表
    priceChange(item) {
      if (!this.oilGunNum || !this.oilGunName) {
        uni.showToast({
          title: "请先选择油枪号",
          icon: "error",
        });
        return;
      }
      this.priceValue = item;
      this.priceHandleChange();
    },

    priceHandleChange() {
      if (this.priceValue < 5 || this.priceValue > 50000 || !this.oilGunNum || !this.oilGunName) {
        uni.showToast({
          title: "请输入5-50000的值",
          icon: "error",
        });
        return;
      }
      this.showKeyboard = false;
      uni.navigateTo({
        url: `/subPack/fuel/remitb?stationId=${this.stationId}&priceValue=${this.priceValue}&distances=${this.distances}&oilName=${this.oilName}&oilGunNum=${this.oilGunNum}&oilId=${this.oilId}`,
      });
    },

    // 返回上一页
    goFuelPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fuel_remit_wraper {
  box-sizing: border-box;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f6bc8c, #f5f6f8, #f5f6f8, #f5f6f8);
  padding: 30rpx 20rpx 180rpx;
  .confirm button .confirm-text {
    width: 60rpx;
    font-size: 62rpx !important;
    line-height: 76rpx;
  }
  .fuel_remit_nav {
    box-sizing: border-box;
    width: 100%;
    border-radius: 14rpx;
    background-color: #fff;
    overflow: hidden;
    .title_wraper {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 35rpx 27rpx 0 33rpx;
      .title_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title_name {
          font-size: 34rpx;
          color: #333;
          font-weight: bold;
        }
        .fuel_icon {
          width: 50rpx;
          height: 42rpx;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .title_bottom {
        margin-top: 36rpx;
        font-size: 24rpx;
        color: #4c4c4c;
      }
    }
    .main_wraper {
      display: flex;
      padding: 38rpx 0 22rpx 32rpx;
      align-items: center;
      .main_title {
        font-size: 40rpx;
        color: #ff4e00;
        font-weight: 600;
        margin-right: 20rpx;
        .text {
          font-size: 24rpx;
        }
      }
      .station_price {
        padding-left: 15rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #4c4c4c;
      }
      .main_station {
        font-size: 22rpx;
        color: #666;
        height: 40rpx;
        margin-top: 22rpx;
      }
    }
    .notice_icon_model {
      border-top: 1rpx solid #dedede;
      padding-top: 30rpx;
      display: flex;
      padding-left: 36rpx;
      padding-bottom: 23rpx;
      align-items: center;
      font-size: 24rpx;
      color: #4c4c4c;
      .notice_icon {
        width: 46rpx;
        height: 39rpx;
        margin-right: 35rpx;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .remit_container {
    .oils {
      margin-top: 10rpx;
      padding: 33rpx 28rpx 36rpx 35rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: #000;
      border-radius: 10rpx;
      .select_oils {
        font-weight: bold;
      }
      .oil_right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .select_icon {
          padding-left: 18rpx;
          img {
            width: 29rpx;
            height: 16rpx;
            // object-fit: cover;
          }
        }
      }
    }
    .oils_price {
      margin-top: 10rpx;
      padding: 33rpx 28rpx 36rpx 35rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: #000;
      border-radius: 10rpx;
      .input_price {
        font-weight: bold;
      }
      .field_price {
        margin-top: 36rpx;
        height: 125rpx;
        input {
          border: 2rpx solid #f8724e;
          height: 100%;
          border-radius: 10rpx;
          padding-left: 20rpx;
          font-size: 44rpx;
          font-weight: bold;
        }
      }
      .btn_model {
        margin-top: 19rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view {
          border-radius: 10rpx;
          font-size: 34rpx;
          color: #333;
          border: 1rpx solid #e5e5e5;
          padding: 27rpx 44rpx;
          background-color: #f7f9fc;
        }
      }
    }
  }
}
.pupop {
  .fuel_qiang {
    height: 500rpx;
    padding: 30rpx;
    overflow: auto;
    .youqiang {
      text-align: center;
    }
    .main_card_container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .active {
        background-color: #ff4e00;
        border-radius: 30rpx;
        width: 48%;
        text-align: center;
        padding: 20rpx 0;
        margin: 20rpx 0;
      }
      .main_card {
        border-radius: 30rpx;
        width: 48%;
        text-align: center;
        background: #f2f2f2;
        padding: 20rpx 0;
        margin: 20rpx 0;
      }
    }
  }
}
</style>
